<template>
  <div>
    <div class="search">
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        clearable
        @select="handleSelect"
        @blur="onInputBlur"
      />
    </div>
    <div class="Tree">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node }">
          <i class="iconfont icon-wenjianjia" />
          <span style="padding-left: 4px;font-size:13px">{{ node.label }}</span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import API from '../../../../api/index'
import bus from '../../../common/bus'
export default {
  props: ['treedata'],
  data() {
    return {
      restaurants: [],
      state: '',
      timeout: null,
      treeData: [],
      defaultProps: {
        children: 'childNodes',
        label: 'node'
      }
    }
  },
  watch: {
    treedata(v) {
      this.treeData = v
      this.restaurants = v.map((res) => {
        const Json = {
          value: res.node,
          nodeId: res.nodeId
        }
        return Json
      })
    },
    state(v) {
      if (v === '') {
        this.$nextTick(() => {
          this.treeData = this.treedata
        })
      }
    }
  },
  mounted() {
  },
  methods: {
    querySearchAsync(queryString, cb) {
      const restaurants = this.restaurants
      const results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 500 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return state.value === 0
      }
    },
    handleSelect(item) {
      const me = this
      const data = {
        nodeId: item.nodeId
      }
      API.datapage.NodeTree(data).then((res) => {
        if (res.code === 1) {
          me.treeData = res.data
        }
      }).catch((res) => {
        console.log(res)
      })
    },
    // 点击选择的树状节点
    handleNodeClick(data) {
      bus.$emit('NodeData', data)
      this.$store.commit('SAVE_NODENAME', data.node)
    },
    // 失去焦点
    onInputBlur() {
      console.log('失去焦点')
    }
  }
}
</script>

<style lang="scss" scoped>
.search{
  padding-top: 1.25rem;
  display: flex;
  justify-content: center;
}
.Tree{
  margin-top: 1.25rem;
}
</style>
<style>
.search .el-input__inner{
  background-color: #27354E;
  border: 1px solid #27354E;
  color: #f4f4f5;
}
.search .el-input__inner:focus {
    border-color: #27354E;
    outline: 0;
}
.search .el-input__inner:hover {
    border-color: #27354E;
    outline: 0;
}
.Tree .el-tree{
  background-color: #27354E;
}
.Tree .el-tree-node__content:hover {
  background-color: #27354E;
  color: rgba(255, 255, 255, 0.75);
}
.Tree .el-tree-node:focus>.el-tree-node__content{
  background-color: #1C283C;
  color: rgba(255, 255, 255, 0.75);
}
.Tree .el-tree-node__label{
  color: #f4f4f5;
}
/* .is-focusable{
  color: aqua;
} */
</style>
